<!--  -->
<template>
  <div class=''>
    <h2>儿</h2>
    <!-- <p>foo:{{ foo }}</p>
    <p>attrs:{{ $attrs }}</p> -->
   <h2>{{ obj.name }}</h2> <!-- 依赖注入 第三步 -->
    <button @click="changeQwe">依赖注入传入方法</button>
    <ChildDomChild v-bind="$attrs" v-on="$listeners"></ChildDomChild>
  </div>
</template>


<script>

import ChildDomChild from './ChildDomChild';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {ChildDomChild},
    data() {
    //这里存放数据
      return {

      };
    },
    inject:['obj','changeVal'],//依赖注入 第二步
    // props:['foo'],
    inheritAttrs:false,
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    changeQwe(){
        this.changeVal('lee')
        this.obj.name = 'lee'
    }
  },
  beforeCreate(){
     console.log('son-beforeCreate');
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log('son-created');
  },
  beforeMount(){
    console.log('son-beforeMount');
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log('son-mounted');
  },
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类

</style>